<template>
    <div>
        <!--查询表单-->
        <div>
            <el-form :inline="true" :model="searchFormData" class="demo-form-inline">
                <el-form-item label="通道">
                    <el-select v-model="searchFormData.channelCode" placeholder="通道名称" size="mini">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="套餐">
                    <el-select v-model="searchFormData.comboCode" placeholder="套餐名称" size="mini">
                        <el-option v-for="item in combos" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="searchFormData.inputTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="mini">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit" size="mini">查询</el-button>
                    <el-button type="success" @click="importDialogFormVisible=true" size="mini">导入</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <el-table :data="tableData" border height="500px" max-height="500px" id="inputRecordList">
            <el-table-column fixed prop="beginId" label="起始id" align="center"/>
            <el-table-column prop="endId" label="结束id" align="center"/>
            <el-table-column prop="cardNum" label="卡数量" align="center"/>
            <el-table-column prop="channelName" label="通道" align="center"/>
            <el-table-column prop="comboName" label="套餐" align="center"/>
            <el-table-column prop="createTime" label="导入时间" align="center"/>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button @click="editClick(scope.row)" type="primary" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delClick(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--翻页-->
        <div>
            <pageHelper :current-page="page" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" class="my_pagenation"/>
        </div>
        <!--编辑表单-->
        <el-dialog title="编辑" :visible.sync="editDialogFormVisible">
            <el-form :model="editForm">
                <el-form-item label="通道名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.channelName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="运营商" :label-width="formLabelWidth">
                    <el-input v-model="editForm.vendor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="editForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="editForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="key" :label-width="formLabelWidth">
                    <el-input v-model="editForm.key" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="接口地址" :label-width="formLabelWidth">
                    <el-select v-model="editForm.url" placeholder="接口地址">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editCancel">取 消</el-button>
                <el-button type="primary" @click="editConfirm">确 定</el-button>
            </div>
        </el-dialog>
        <!--导入表单-->
        <el-dialog title="表单导入" :visible.sync="importDialogFormVisible" width="30%" @close="importDialogCloseCall">
            <el-form :model="importFormData" :rules="importRules" ref="ruleForm">
                <el-form-item :label-width="formLabelWidth" prop="file">
                    <el-button type="success" @click="$refs.file.click()">{{ importFormData.file ? '重新选择' : '选择文件' }}
                    </el-button>
                    {{ importFormData.file ? importFormData.file.name : '' }}
                    <input type="file" ref="file" style="display:none;"
                           @change="importFormData.file = $event.target.files[0]"/>
                </el-form-item>
                <br>
                <el-form-item label="通道" :label-width="formLabelWidth" prop="channel">
                    <el-select v-model="importFormData.channelCode" placeholder="请选择">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="套餐" :label-width="formLabelWidth" prop="combo">
                    <el-select v-model="importFormData.comboCode" placeholder="请选择" class="test">
                        <el-option v-for="item in combos" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否共享" :label-width="formLabelWidth" prop="isShare">
                    <el-select v-model="importFormData.share" placeholder="请选择" class="test">
                        <el-option v-for="item in shares" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="importDialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="importCommit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios';
    import pageHelper from '../common/pageHelper'
    import {mytips, getTimeByTimeArray} from '@/module/tools';
    import {Loading} from 'element-ui';

    document.title = '入库记录';
    export default {
        name: 'inputRecordList',
        components: {pageHelper, Loading},
        data() {
            return {
                total: 120,
                page: 1,
                size: 10,
                importDialogFormVisible: false,
                editDialogFormVisible: false,
                formLabelWidth: '80px',
                tableData: [],
                searchFormData: {
                    channelCode: null,
                    comboCode: null,
                    inputTime: null,
                    beginTime: null,
                    endTime: null
                },
                importFormData: {
                    file: null,
                    channelCode: null,
                    comboCode: null,
                    share: null,
                },
                importRules: {
                    file: [
                        {required: true, message: '请选择文件', trigger: 'change'}
                    ],
                    channelCode: [
                        {required: true, message: '请选择通道', trigger: 'change'}
                    ],
                    comboCode: [
                        {required: true, message: '请选择套餐', trigger: 'change'}
                    ],
                    share: [
                        {required: true, message: '请选择活动区域', trigger: 'change'}
                    ]
                },
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                combos:
                    [{label: "套餐1", value: 1},
                        {label: "套餐2", value: 2},
                        {label: "套餐3", value: 3}],
                actives: [
                    {label: "激活", value: 0},
                    {label: "不激活", value: 1}
                ],
                shares: [
                    {label: "共享", value: 0},
                    {label: "不共享", value: 1}
                ],
                flowPools: [
                    {label: "流量池1", value: 1},
                    {label: "流量池2", value: 2}
                ],
                editForm: {
                    channelName: '',
                    vendor: '',
                    username: '',
                    password: '',
                    key: '',
                    url: ''
                },
                options: ''
            }
        },
        created() {
        },

        methods: {
            /*翻页跳转处理，传入页数*/
            getData: function (page, size) {
                this.page = page || 1;
                this.size = size || 10;
                this.searchFormData.beginTime = getTimeByTimeArray(this.searchFormData.inputTime, 0);
                this.searchFormData.endTime = getTimeByTimeArray(this.searchFormData.inputTime, 1);
                let loading = this.$loading(this.options);
                axios({
                    method: 'get',
                    url: API_PATH + '/enterStore/query',
                    dataType: 'json',
                    params: {
                        page: this.page,
                        size: this.size,
                        beginTime: this.searchFormData.beginTime,
                        endTime: this.searchFormData.endTime,
                    }
                }).then(
                    res => {
                        if (res.data.code == 0) {
                            console.log('请求成功');
                            this.tableData = res.data.list;
                            this.total = res.data.total;
                        }
                    },
                    xhr => {
                    }
                )
                this.$nextTick(() => {
                    console.log('关闭loading');
                    loading.close();
                })
            },
            delClick(row) {
                console.log('==删除操作==时间' + row.date);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    console.log("取消")
                });
            },
            searchSubmit() {
                this.getData(this.page, this.size);
            },
            importCommit(formName) {
                console.log("导入确认", this.searchFormData);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log("打印文件对象", this.$data);
                        console.log(this.file);
                        this.$confirm('是否确定导入?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            let formData = new FormData();
                            formData.append('file', this.importFormData.file);
                            formData.append('channelCode', this.importFormData.channelCode);
                            formData.append('comboCode', this.importFormData.comboCode);
                            formData.append('share', this.importFormData.share);
                            console.log('formData', formData);
                            axios.post(API_PATH + "/card/enter", formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            }).then(res => {
                                console.log('导入响应res', res)
                                this.$message({
                                    type: 'success',
                                    message: '导入成功!'
                                });
                            })
                        }).catch(() => {
                            console.log("点击取消后执行");
                        });
                    } else {
                        //上传错误提示
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            editClick(row) {
                console.log('==编辑操作==', row);
                this.editForm.channelName = row.channel,
                    this.editForm.vendor = row.channel,
                    this.editForm.username = row.channel,
                    this.editForm.password = row.channel,
                    this.editForm.key = row.channel,
                    this.editDialogFormVisible = true;
            },
            //确认修改
            editConfirm(row) {

            },
            editCancel() {
                this.clearEditForm();
                this.editDialogFormVisible = false;
                //注意关闭数据后的数据清楚
            }
            ,
            clearEditForm() {
                this.editForm = {
                    channelName: '',
                    vendor: '',
                    username: '',
                    password: '',
                    key: '',
                    url: ''
                }
            },
            handleSizeChange(size) {
                this.getData(this.page, size);
            }
            ,
            handleCurrentChange(page) {
                this.getData(page, this.size);
            },
            importDialogCloseCall() {
                this.$refs[formName].resetFields('ruleForm');
                this.file = null;
                this.importDialogFormVisible = false;
            }
        }
        ,
        mounted() {
            this.options = {
                text: '加载中...',
                background: 'rgba(0,0,0,0,1)',
                target: document.getElementById("inputRecordList")
            }
            this.getData();
        }

    }
</script>

<style scoped>
    .express-ctr-item {
        margin-top: 12px;
    }

    .express-ctr-item .express-ctr-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        line-height: 32px;
    }

    .test {
        width: 100px;
    }

    .file-btn {
        background-color: gray;
        width: 200px;
    }
</style>

